<template>
  <!-- 文章审核 -->
  <div id="ArticleReview">
    <el-card style="margin-bottom: 10px">
      <el-input
        v-model="sousuoform.articleTitle"
        style="width: 200px; margin-left: 5px"
        placeholder="请输入文章标题"
        suffix-icon="el-icon-tickets"
      ></el-input>
      <el-button
        class="custom-button ml-10"
        icon="el-icon-search"
        v-on:click="load()"
        >搜索</el-button
      >

      <el-switch
        style="margin-left: 30px; margin-right: 10px"
        v-model="sortType"
        :active-value="'earliest'"
        :inactive-value="''"
        active-color="#2cd3b5"
        @change="handleSortChange"
      />
      <span style="font-size: 14px; color: rgb(144, 147, 153)">最早</span>
      <el-switch
        style="margin-left: 30px; margin-right: 10px"
        v-model="sortType"
        :active-value="'latest'"
        :inactive-value="''"
        active-color="#2cd3b5"
        @change="handleSortChange"
      /><span style="font-size: 14px; color: rgb(144, 147, 153)">最晚</span>
    </el-card>

    <el-card>
      <!-- 表格区域 -->
      <el-table
        :data="articleList"
        border
        stripe
        header-cell-class-name="headerBg"
        height="600"
      >
        <el-table-column prop="userName" label="发布者名" width="120" />
        <el-table-column
          prop="articleTitle"
          label="文章标题"
          width="200"
          :show-overflow-tooltip="true"
        />
        <el-table-column prop="images" label="图片" width="150">
          <template slot-scope="scope">
            <el-carousel height="150px" v-if="scope.row.images">
              <el-carousel-item
                v-for="item,index in scope.row.images.split(',')"
                :key="index"
              >
                <img height="100" width="100" :src="$imageUrl + item" />
              </el-carousel-item>
            </el-carousel>
            <el-tag v-else type="info">暂无数据</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="video" label="视频" width="150">
          <template slot-scope="scope">
            <el-carousel height="150px" v-if="scope.row.video">
              <el-carousel-item
                v-for="item,index in scope.row.video.split(',')"
                :key="index"
              >
                <video
                  height="100"
                  width="100"
                  :src="getVideoUrl(item)"
                  controls
                ></video>
              </el-carousel-item>
            </el-carousel>
            <el-tag v-else type="info">暂无数据</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="auditTime" label="审核时间" width="160" />
        <el-table-column prop="auditor" label="审核人员" width="120" />
        <el-table-column prop="approvalStatus" label="审核状态" width="120">
          <template slot-scope="scope">
            <el-tag effect="plain" v-if="scope.row.approvalStatus == 0"
              >待审核</el-tag
            >
            <el-tag
              effect="plain"
              class="pass_button"
              type="success"
              v-if="scope.row.approvalStatus == 1"
              >通过</el-tag
            >
            <el-tag
              effect="plain"
              type="danger"
              v-if="scope.row.approvalStatus == 2"
              >驳回</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="isHidden" label="隐藏发布" width="100">
          <template slot-scope="scope">
            <el-tag effect="dark" type="info" v-if="scope.row.isHidden == 1"
              >隐藏</el-tag
            >
            <el-tag effect="dark" type="danger" v-else>显示</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="350">
          <template slot-scope="scope">
            <el-button
              :style="{ color: '#2cd3b5' }"
              type="text"
              @click="examine(scope.row)"
              icon="el-icon-search"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 查看弹窗 -->
      <el-dialog title="文章详情" :visible.sync="lookwindows" width="50%">
      <el-descriptions :column="1" size="small" border>
        <el-descriptions-item label="文章标题" >
          {{ FormData.articleTitle }}
        </el-descriptions-item>
        <el-descriptions-item label="文章内容">
          <div v-html="FormData.articleContent"></div>
        </el-descriptions-item>
        <el-descriptions-item label="文章图片" v-if="FormData.images">
          <el-image
            style="width: 100px; height: 100px"
            v-for="(item, index) in FormData.images.split(',')"
            :key="index"
            :src="$imageUrl + item"
          ></el-image>
        </el-descriptions-item>
        <el-descriptions-item label="文章视频" v-if="FormData.video">
                <video 
                v-for="(item, index) in FormData.video.split(',')"
                :key="index"
                  height="100"
                  width="100"
                  :src="getVideoUrl(item)"
                  controls
                ></video>
        </el-descriptions-item>
        <el-descriptions-item label="文章标签">
          {{ FormData.dictLabel}}
        </el-descriptions-item>
        <el-descriptions-item label="审核人员">
          {{ FormData.auditor }}
        </el-descriptions-item>
        <el-descriptions-item label="审核意见">
          {{ FormData.auditComment }}
        </el-descriptions-item>
        <el-descriptions-item label="发布时间">
          {{ FormData.publishTime }}
        </el-descriptions-item>
        <el-descriptions-item label="审核状态">
          <div v-if="FormData.approvalStatus === 0">待审核</div>
          <div v-if="FormData.approvalStatus === 1">审核成功</div>
          <div v-if="FormData.approvalStatus === 2">审核失败</div>
        </el-descriptions-item>
        <el-descriptions-item label="是否隐藏">
          <div v-if="FormData.isHidden === 1">是</div>
          <div v-if="FormData.isHidden === 2">否</div>
        </el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button @click="lookwindows = false">取 消</el-button>
      </span>
    </el-dialog>





    
      <!-- <el-dialog
        title="文章详情"
        :visible.sync="lookwindows"
        class="class_dialog_hospital"
      >
        <el-form :model="FormData" label-width="100px">
          <el-form-item label="文章标题:" prop="articleTitle">
            <b>{{ FormData.articleTitle }}</b>
          </el-form-item>
          <el-form-item label="文章内容:" prop="articleContent">
            <div style="width: 300px; background-color: gainsboro">
              {{ FormData.articleContent }}
            </div>
          </el-form-item>
          <el-form-item label="图片:" prop="images">
            <div
              style="
                width: 600px;
                margin: 0;
                padding: 0;
                box-sizing: border-box;
              "
            >
              <el-image
                style="width: 100px; height: 100px"
                v-for="(item, index) in FormData.images.split(',')"
                :key="index"
                :src="$imageUrl + item"
              ></el-image>
            </div>
          </el-form-item>
          <el-form-item label="视频:" prop="video">
            <el-input v-model="FormData.video" disabled></el-input>
          </el-form-item>
          <el-form-item label="发布时间:" prop="publishTime">
            <div>{{ FormData.publishTime }}</div>
          </el-form-item>
          <el-form-item label="标签:" prop="tags">
            <el-input v-model="FormData.tags" disabled></el-input>
          </el-form-item>

          <el-form-item label="审核人员:" prop="auditor">
            <el-input v-model="FormData.auditor" disabled></el-input>
          </el-form-item>

          <el-form-item label="审核意见:" prop="auditComment">
            <el-input v-model="FormData.auditComment" disabled></el-input>
          </el-form-item>

          <el-form-item label="是否隐藏:" prop="isHidden"> -->
            <!-- <div>{{ FormData.isHidden }}</div> -->
            <!-- <div v-if="FormData.isHidden === 1">是</div>
            <div v-if="FormData.isHidden === 2">否</div>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="lookwindows = false">取 消</el-button>
        </span>
      </el-dialog> -->
    </el-card>

    <el-pagination
      class="pageAll"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      style="text-align: center"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lookwindowss: false,
      // 开关
      sortType: "", // 当前选中的排序类型，可选值为 'earliest' 或 'latest'
      // 文章列表
      articleList: [],
      allArticleList: [],
      currentPage4: 1, // 默认第几页
      pageNum: 1,
      pageSize: 5,
      total: 0,
      // 搜索条件
      sousuoform: {
        articleTitle: "",
      },
      FormData: {
        auditor: "",
        auditStatus: "",
        auditResult: "",
        auditComment: "",
        id: "",
        doctorName: "",
        articleId: "",
        userId: "",
        articleTitle: "",
        articleContent: "",
        images: "",
        video: "",
        publishTime: "",
        tags: "",
        isPublished: "",
        approvalStatus: "",
        isHidden: "", // 是否隐藏：隐藏1/显示2
      },
      auditform: {},
      // Form: {
      //   auditComment: '',
      //   articleId: '',
      //   auditor: ''
      // },
      // 查看窗口
      lookwindows: false,
    };
  },
  mounted() {
    this.load();
  },
  computed: {},
  methods: {
    getVideoUrl(videoId) {
      return this.$videoUrl + videoId;
    },

    load() {
      // 查询审核记录
      this.$axios
        .get("/articleReview/ArticleAuditList", {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            articleTitle: this.sousuoform.articleTitle,
          },
        })
        .then((res) => {
          this.articleList = res.data.data.content;
          this.total = res.data.data.totalSize;
        })
        .catch((err) => {});
    },

    handleSortChange() {
      // 根据排序类型重新加载数据或者重新排序文章列表
      if (this.sortType === "earliest") {
        // 执行最早排序的操作
        this.articleList.sort(
          (a, b) => new Date(a.auditTime) - new Date(b.auditTime)
        );
      } else if (this.sortType === "latest") {
        // 执行最晚排序的操作
        this.articleList.sort(
          (a, b) => new Date(b.auditTime) - new Date(a.auditTime)
        );
      } else {
        this.load();
      }
    },
    myMessage(type, message) {
      this.$message({
        message: message,
        type: type,
      });
    },
    // 查看单行
    examine(row) {
      this.lookwindows = true;
      this.FormData = JSON.parse(JSON.stringify(row));
      // this.doctorName = row.doctorName;
    },
    // 清空搜索框
    reset() {
      this.sousuoform.doctorName = "";
      this.sousuoform.articleTitle = "";
      this.sortType = "";
      this.load();
    },
    handleSizeChange(val) {
      // 改变每页条数
      this.pageSize = val;
      this.load();
    },
    handleCurrentChange(val) {
      // 改变当前页
      this.pageNum = val;
      this.load();
    },
  },
};
</script>

<style>
/*审批通过按钮 */
.pass_button {
  background-color: #d4f8f1; /* 设置按钮的背景颜色 */
  color: #2cd3b5; /* 设置按钮里的字体颜色 */
  border-color: #d4f8f1; /* 设置按钮的边框颜色 */
}
.custom-button {
  background-color: #2cd3b5; /* 设置按钮的背景颜色 */
  color: #fff; /* 设置按钮里的字体颜色 */
  border-color: #2cd3b5; /* 设置按钮的边框颜色 */
}
.custom-buttonT {
  background-color: #ffff; /* 设置按钮的背景颜色 */
  color: #2cd3b5; /* 设置按钮里的字体颜色 */
  border-color: #2cd3b5; /* 设置按钮的边框颜色 */
}
/*分页*/
::v-deep.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #2cd3b5;
  color: #fff;
}
::v-deep.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #2cd3b5;
  color: #fff;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #2cd3b5;
}
.class_dialog_hospital {
  width: 100%;
}
.class_dialog_hospital {
  width: 100%;
}
/*标题样式*/
.class_dialog_hospital .el-dialog__title {
  font-size: 14px;
}
/*头区样式*/
.class_dialog_hospital .el-dialog__header {
  height: 26px;
  background: #e6e6e6;
  padding: 4px 0 4px 10px;
  border-top-left-radius: 9px;
  border-top-right-radius: 9px;
}

/*头区退出按钮样式*/
.class_dialog_hospital .el-dialog__headerbtn {
  top: 10px;
  right: 10px;
  font-size: 16px;
}

/*对话框区*/
.class_dialog_hospital .el-dialog {
  border: 1px solid #dcdfe6;
  box-shadow: 0 0 4px #e6e6e6;
  border-radius: 9px;
  padding: 0;
}

/*内容区*/
.class_dialog_hospital .el-dialog__body {
  padding: 0;
}

/*脚区*/
.class_dialog_hospital .el-dialog__footer {
  border-top: 2px solid #e8eaec;
  height: 54px;
  font-weight: bolder;
}
/* 弹窗样式*/
</style>
